<template>
  <div class="app-container">
    <h1>新增模板</h1>
    <div>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="模板名称：" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="计费方式：">
          <el-radio-group v-model="ruleForm.resource">
            <el-radio label="按件数"></el-radio>
            <el-radio label="按重量"></el-radio>
            <el-radio label="按体积"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="配送区域：" prop="quyulist">
          <el-table
            :data="tableData"
            style="width: 100%"
            align="center"
            header-align="center"
            border
          >
            <el-table-column prop="ps_quyu" label="可配送区域" width="450"></el-table-column>
            <el-table-column label="操作">
              <el-button plain size="mini" type="primary">修改</el-button>
              <el-button plain size="mini" type="primary">删除</el-button>
            </el-table-column>
            <el-table-column prop="one_num" label="首件（个）"></el-table-column>
            <el-table-column prop="priceo" label="首费（元）"></el-table-column>
            <el-table-column prop="two_num" label="续件（个）"></el-table-column>
            <el-table-column prop="pricet" label="续费（元）"></el-table-column>
          </el-table>
          <el-col :span="24" class="toolbar" style="padding-bottom: 40px;padding-top:10px">
            <el-button type="primary" @click="selcity">指定可配送区域和运费</el-button>
          </el-col>
          <el-col :span="24" class="toolbar">
            <el-button type="success" @click="baocun">保存</el-button>
            <el-button type="info" @click="quxiao">取消</el-button>
          </el-col>
        </el-form-item>
      </el-form>
    </div>
    <!-- 点击制定可配置区域和运费后的选择城市弹框 -->
    <div class="mobancity" v-show="boolcity">
      <div class="mbcity_top">
        <h3>选择配送区域</h3>
        <span class="el-icon-close" @click="closecity"></span>
      </div>
      <div class="mbcity_bottom">
        <div class="mbb_left">
          <el-checkbox-group
            :indeterminate="isIndeterminateo"
            v-model="checksheng"
            @change="handleChecksheng"
          >
            <el-checkbox v-for="item in citylist" :label="item" :key="item.ID">{{item.AddName}}</el-checkbox>
          </el-checkbox-group>
        </div>
        <!-- 省份 -->
        <div class="mbb_right">
          <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChangez">
            <el-checkbox v-for="city in citysheng" :label="city" :key="city.ID">
              {{city.AddName}}
              <span class="el-icon-arrow-down" @click="selcityqu"></span>
            </el-checkbox>
          </el-checkbox-group>
          <div class="mbr_citys" v-show="boolqu">
            <!-- <ul v-for="(ele,index) in citysheng[0].cityshi">
              <li :key="index">{{ele.AddName}}</li>
            </ul>-->
          </div>
        </div>
      </div>
      <div class="tj">
        <p>
          <el-checkbox
            :indeterminate="isIndeterminate"
            v-model="checkAll"
            @change="handleCheckAllChange"
          >全选</el-checkbox>
        </p>
        <p>
          已选择418个区域
          <el-button type="primary">提交</el-button>
        </p>
      </div>
    </div>
  </div>
</template>
<script>
import { close } from "fs";
export default {
  name: "yunfeimoban",
  data() {
    return {
      boolcity: false,
      // 城市的下拉框
      boolqu: true,
      // 城市筛选
      citylist: [],
      //省
      citysheng: [],
      //选择的城市
      checkedCities: [],
      checksheng: [],
      checkAll: false,
      isIndeterminate: false,
      isIndeterminateo: true,
      ruleForm: {
        name: "模板名称",
        resource: "",
        quyulist: ""
      },
      tableData: [
        {
          ps_quyu: "辽宁省,吉林省,黑龙江省,上海市,江苏省,浙江省",
          one_num: "1",
          priceo: "0.00",
          two_num: "1",
          pricet: "0.00"
        },
        {
          ps_quyu: "新疆维吾尔自治区,西藏自治区",
          one_num: "1",
          priceo: "15.00",
          two_num: "1",
          pricet: "5.00"
        }
      ],
      // 验证规则
      rules: {
        name: [
          { required: true, message: "请输入模板名称", trigger: "blur" },
          {
            min: 1,
            max: 50,
            message: "长度最长不超过50个字符",
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    baocun() {},
    quxiao() {},
    // 选择城市的弹框
    selcity() {
      this.boolcity = true;
    },
    closecity() {
      this.boolcity = false;
    },
    //城市列表数据的填充
    citysel() {
      this.$apis.mockCity().then(res => {
        if (res.data.length) {
          res.data.forEach((item, index) => {
            if (item.IDo) {
              this.citylist.push(item);
            }
            if (item.TopID == 0) {
              item.cityshi = [];
              this.citysheng.push(item);
            }
          });
          // 各个省份对应的城市
          this.citysheng.forEach((item, index) => {
            res.data.forEach((ele, index) => {
              if (ele.TopID != 0 && item.ID == ele.TopID) {
                ele.cityqu = [];
                item.cityshi.push(ele);
              }
            });
          });
          // 各个城市对应的区域
          //  { "ID": 1175, "TopID": 125, "AddName": "桃城区" }
          //  { "ID": 125, "TopID": 9, "AddName": "衡水市" },
          this.citysheng.forEach((item, index) => {
            item.cityshi.forEach((ele, index) => {
              res.data.forEach((el, index) => {
                if (ele.ID == el.TopID) {
                  ele.cityqu.push(el);
                }
              });
            });
          });
          console.log(this.citysheng);
        }
      });
    },
    //选择框的事件 全选
    handleCheckAllChange(val) {
      this.checkedCities = val ? this.citysheng : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.citysheng.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.citysheng.length;
    },
    // 区域部分选择 省份的联动
    handleChecksheng(val) {
      console.log(val);
      var checksheng = [];
      if (val.length) {
        val.forEach((item, index) => {
          if (item.IDo == 1) {
            checksheng.push(this.citysheng[0]);
            checksheng.push(this.citysheng[1]);
            checksheng.push(this.citysheng[2]);
            checksheng.push(this.citysheng[3]);
          } else if (item.IDo == 2) {
            checksheng.push(this.citysheng[4]);
            checksheng.push(this.citysheng[5]);
            checksheng.push(this.citysheng[6]);
          } else if (item.IDo == 3) {
            checksheng.push(this.citysheng[7]);
            checksheng.push(this.citysheng[8]);
            checksheng.push(this.citysheng[9]);
          }
          this.checkedCities = val.length ? checksheng : [];
        });
      } else {
        this.checkedCities = val.length ? checksheng : [];
      }
    },
    handleCheckedCitiesChangez(value) {
      console.log(value);
      let checkedCount = value.length;
      console.log(checkedCount);
      this.checksheng = checkedCount === this.checkedCities.length;
      this.isIndeterminateo =
        checkedCount > 0 && checkedCount < this.checkedCities.length;
    },
    // 点击省份的下拉框3719246906374
    selcityqu() {}
  },
  mounted() {
    this.citysel();
  }
};
</script>
<style lang="scss" scoped>
/deep/ #el-popover-6350 {
  left: 300px !important;
}
li {
  list-style: none;
}
.mobancity {
  position: fixed;
  left: 50%;
  margin-left: -335px;
  top: 50%;
  margin-top: -200px;
  width: 750px;
  height: 500px;
  overflow: hidden;
  background: #fff;
  z-index: 2000;
  .mbcity_top {
    width: 100%;
    padding: 0 10px;
    background: rgba(242, 242, 242, 1);
    height: 50px;
    margin: 0;
    border-bottom: 1px solid rgba(215, 215, 215, 1);
    > h3 {
      float: left;
      padding: 0;
      margin: 0;
      line-height: 50px;
      height: 50px;
    }
    > span {
      float: right;
      display: block;
      padding: 0;
      margin: 0;
      line-height: 50px;
      height: 50px;
    }
  }
  .mbcity_bottom {
    height: 400px;
    overflow: hidden;
    padding: 20px;
    width: 100%;
    .mbb_left {
      width: 16%;
      height: 100%;
      float: left;
      overflow: auto;
    }
    .mbb_right {
      width: 82%;
      float: left;
      overflow: auto;
      height: 100%;
      position: relative;
      .el-checkbox {
        width: 33%;
        overflow: hidden;
        text-align: left;
        margin: 10px 0 0;
      }
      .mbr_citys {
        position: absolute;
        z-index: 99999;
        background: #fff;
        height: 200px;
        width: 384px;
        left: 0px;
        top: 30px;
        overflow: auto;
      }
    }
  }
  .tj {
    width: 100%;
    padding: 0 10px;
    background: rgba(242, 242, 242, 1);
    height: 50px;
    margin: 0;
    border-top: 1px solid rgba(215, 215, 215, 1);
    line-height: 50px;
    > p {
      float: left;
      width: 50%;
      height: 50px;
      line-height: 50px;
      padding: 0;
      margin: 0;
    }
    > p:nth-of-type(2) {
      text-align: right;
    }
  }
}
</style>